<template>
  <headerXX :name="title"></headerXX>
  <div style="box-sizing: border-box" class="box padding10">
    <div class="TX_TOP">
      <van-image
        class="imgTX"
        :src="require('../../static/ry.png')"
        mode=""
      ></van-image>
      <div>
        <div class="marginBottom10 WZ_size_18" style="font-weight: 700">
          嗨，{{ name }}
        </div>
        <div class="felx">
          <div class="felx" v-if="XXobj.gender != ''">
            <van-icon name="manager" size="10" />
            <div class="marginZY5 WZ_size_10">
              {{ XXobj.gender }}
            </div>
          </div>
          <div
            v-if="XXobj.age != 0"
            class="marginZY5 WZ_size_14"
            style="color: #000"
          >
            ·
          </div>
          <div class="felx" v-if="XXobj.age != 0">
            <div class="marginZY5 WZ_size_10">{{ XXobj.age }}岁</div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="NR paddingSX10 paddingTOP100"
      style="
        background: rgb(241, 245, 249);
        width: 100%;
        box-sizing: border-box;
      "
    >
      <div class="felx">
        <div class="img" v-if="XXobj.BMIScore == 'A'" style="color: #19be6b">
          {{ XXobj.BMIScore }}
        </div>
        <div class="img" v-if="XXobj.BMIScore == 'B'" style="color: #2979ff">
          {{ XXobj.BMIScore }}
        </div>
        <div class="img" v-if="XXobj.BMIScore == 'C'" style="color: #ff9900">
          {{ XXobj.BMIScore }}
        </div>
        <div class="img" v-if="XXobj.BMIScore == 'D'" style="color: #fa3534">
          {{ XXobj.BMIScore }}
        </div>
        <div class="img" v-if="XXobj.BMIScore == 'E'" style="color: #909399">
          {{ XXobj.BMIScore }}
        </div>
        <div class="img" v-if="XXobj.BMIScore == 'F'" style="color: #c8c9cc">
          {{ XXobj.BMIScore }}
        </div>
        <div class="text">
          <div
            v-if="XXobj.BMIScore != 'F'"
            class="WZ_size_14 marginBottom10"
            style="font-weight: 700"
          >
            AI健康分数
          </div>
          <div
            v-if="XXobj.BMIScore == 'F'"
            class="WZ_size_14 marginBottom10"
            style="font-weight: 700"
          >
            {{ XXobj.BMIScoref }}
          </div>
          <div v-if="XXobj.BMIScore != 'F'" style="color: rgb(107, 120, 136)">
            {{ XXobj.BMIScoref }}
          </div>
        </div>
      </div>
      <div class="title">
        <div class="title_left">结果分析</div>
        <div class="title_right" @click="TZLB">查看全部</div>
      </div>
      <tabul :tabs="2" :list="list" :PDtab="PDtab" @tabFH="XXtab"></tabul>
      <div
        v-show="PDtab == '1'"
        class="padding50 WZ_size_20"
        style="text-align: center"
      >
        暂未测量人体成分
      </div>
      <div v-show="PDtab == '0'" class="JKZCxx">
        <div class="li">
          <div class="WZ_size_14">体温</div>
          <div
            class="ZWXX WZ_size_14"
            v-if="XXobj.tempList.tempv == '' && XXobj.tempList.dw == ''"
          >
            暂无自测信息
          </div>
          <div v-else>
            <div class="WZ_size_14 marginSX5" style="font-weight: 700">
              {{ XXobj.tempList.tempv }}{{ XXobj.tempList.dw }}
            </div>
            <van-image
              class="imgTX"
              width="90%"
              height="100"
              :src="require('./img/WDJ.png')"
              mode=""
            ></van-image>
          </div>
        </div>
        <div class="li">
          <div class="WZ_size_14">心率/氧饱和度</div>
          <div
            class="ZWXX WZ_size_14"
            v-if="XXobj.boList.bpm == '' && XXobj.boList.os == ''"
          >
            暂无自测信息
          </div>
          <div v-else>
            <div class="WZ_size_14 marginSX5" style="font-weight: 700">
              {{ XXobj.boList.bpm }}/{{ XXobj.boList.os }}
            </div>
            <div
              class="bo height80"
              style="width: 100%"
              @click="boshow = true"
            ></div>
          </div>
        </div>
        <div class="li">
          <div class="WZ_size_14">血压</div>
          <div
            class="ZWXX WZ_size_14"
            v-if="XXobj.bpList.dbp == '' && XXobj.bpList.sbp == ''"
          >
            暂无自测信息
          </div>
          <div v-else>
            <div class="WZ_size_14 marginSX5" style="font-weight: 700">
              {{ XXobj.bpList.dbp }}/{{ XXobj.bpList.sbp }}mmHg
            </div>

            <div class="bp height80" style="width: 100%" @click="bpshow=true"></div>
          </div>
        </div>
        <div class="li">
          <div class="WZ_size_14">总胆固醇/尿酸/血糖</div>
          <div
            class="ZWXX WZ_size_14"
            v-if="
              XXobj.bsList.chol == '' &&
              XXobj.bsList.ua == '' &&
              XXobj.bsList.value == ''
            "
          >
            暂无自测信息
          </div>
          <div v-else>
            <div class="WZ_size_14 marginSX5" style="font-weight: 700">
              {{ XXobj.bsList.chol }}/{{ XXobj.bsList.ua }}/{{
                XXobj.bsList.value
              }}
            </div>
            <div
              class="bs height80"
              style="width: 100%"
              @click="bsshow = true"
            ></div>
          </div>
        </div>
        <div class="bottom_li">
          <div class="left">
            <van-image
              class="iconXX"
              width="40"
              height="40"
              :src="require('./img/SG.png')"
              mode=""
            ></van-image>
          </div>
          <div class="XX">
            <div class="WZ_size_14">身高</div>
            <div class="WZ_size_14" v-if="XXobj.bmiList.height == ''" style="color: #666">
              暂无自测信息
            </div>
            <div v-else>
              <div class="WZ_size_16" style="font-weight: 700">
                {{ XXobj.bmiList.height }}
                <text
                  class="paddingLeft5 WZ_size_12"
                  style="color: rgb(78, 93, 111)"
                  >厘米</text
                >
              </div>
            </div>
          </div>
          <div class="img">
            <van-image
              class="iconXX"
              width="100"
              height="50"
              :src="require('./img/SGimg.png')"
              mode=""
            ></van-image>
          </div>
        </div>
        <div class="bottom_li">
          <div class="left">
            <van-image
              class="iconXX"
              width="40"
              height="40"
              :src="require('./img/TZ.png')"
              mode=""
            ></van-image>
          </div>
          <div class="XX">
            <div class="WZ_size_14">体重</div>
            <div  class="WZ_size_14" v-if="XXobj.bmiList.weight == ''" style="color: #666">
              暂无自测信息
            </div>
            <div v-else>
              <div class="WZ_size_16" style="font-weight: 700">
                {{ XXobj.bmiList.weight }}
                <text
                  class="paddingLeft5 WZ_size_12"
                  style="color: rgb(78, 93, 111)"
                  >公斤</text
                >
              </div>
            </div>
          </div>
          <div class="img">
            <van-image
              class="iconXX"
              width="100"
              height="50"
              :src="require('./img/TZimg.png')"
              mode=""
            ></van-image>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- bo展示 -->
  <van-popup style="width: 90%" @close="boshow = false" v-model:show="boshow">
<div class="padding10">
   <van-collapse v-model="bpactiveNames" accordion>
        <van-cell
        title="您的心率是：" :value="XXobj.boList.bpm+' 次/分钟'"
        />
        <van-collapse-item title="BPM（心率，Beats Per Minute）" name="1">
          <van-cell title="正常范围（成人静息心率）" value="60-100 次/分钟"></van-cell>
							<van-cell title="正常范围（长期锻炼者）" value=" 40-60 次/分钟"></van-cell>
							<van-cell title="异常范围（心动过速）" value="> 100 次/分钟"></van-cell>
							<van-cell title="异常范围（心动过缓）" value="< 60 次/分钟"></van-cell>
        </van-collapse-item>
        <van-cell title="您的氧饱和度是：" :value="XXobj.boList.os+' μmol/L'" />
        <van-collapse-item title="OS（氧饱和度，Oxygen Saturation，SpO2）" name="2">
          <van-cell title="正常范围" value="95% - 100%"></van-cell>
							<van-cell title="异常范围" value="< 90%：通常被认为是低氧血症"></van-cell>
        </van-collapse-item>
        <van-cell
         title="您的心率是：" :value="XXobj.bpList.hr+' 次/分钟'"
        />
        <van-collapse-item title="HR（心率，Heart Rate）" name="3">
        <van-cell title="正常范围" value="60-100 次/分钟（成人安静时）"></van-cell>
							<van-cell title="高血压" value=">100 次/分钟"></van-cell>
							<van-cell title="低血压" value="<60 次/分钟（除非是特殊情况）"></van-cell>
        </van-collapse-item>
      </van-collapse>
</div>
  </van-popup>
  <!-- bp展示 -->
   <van-popup style="width: 90%" @close="bpshow = false" v-model:show="bpshow">
<div class="padding10">
   <van-collapse v-model="bpactiveNames" accordion>
        <van-cell
          title="您的‌舒张压是："
         :value="XXobj.bpList.dbp+' mmHg'"
        />
        <van-collapse-item title="DBP（舒张压，Diastolic Blood Pressure）" name="1">
         <van-cell title="正常范围" value="60-80 mmHg"></van-cell>
							<van-cell title="高血压" value="≥80 mmHg"></van-cell>
							<van-cell title="低血压" value="<60 mmHg"></van-cell>
        </van-collapse-item>
        <van-cell title="您的收缩压是：" :value="XXobj.bpList.sbp+' mmHg'" />
        <van-collapse-item title="SBP（收缩压，Systolic Blood Pressure）" name="2">
          <van-cell title="正常范围" value="90-120 mmHg"></van-cell>
							<van-cell title="高血压" value="≥130 mmHg"></van-cell>
							<van-cell title="低血压" value="<90 mmHg"></van-cell>
        </van-collapse-item>
        <van-cell
         title="您的心率是：" :value="XXobj.bpList.hr+' 次/分钟'"
        />
        <van-collapse-item title="HR（心率，Heart Rate）" name="3">
        <van-cell title="正常范围" value="60-100 次/分钟（成人安静时）"></van-cell>
							<van-cell title="高血压" value=">100 次/分钟"></van-cell>
							<van-cell title="低血压" value="<60 次/分钟（除非是特殊情况）"></van-cell>
        </van-collapse-item>
      </van-collapse>
</div>
   </van-popup>
  <!-- bs展示 -->
  <van-popup style="width: 90%" @close="bsshow = false" v-model:show="bsshow">
    <div class="padding10">
      <van-collapse v-model="bsactiveNames" accordion>
        <van-cell
          title="您的‌总胆固醇是："
          :value="XXobj.bsList.chol + ' mmol/L'"
        />
        <van-collapse-item title="胆固醇（chol，Total Cholesterol）" name="1">
          <van-cell title="总胆固醇" value="< 5.2 mmol/L 或 < 200 mg/dL" />
          <van-cell
            title="高胆固醇"
            value="≥ 6.2 mmol/L 或 ≥ 240 mg/dL"
          ></van-cell>
          <van-cell
            title="低胆固醇"
            value="< 3.9 mmol/L 或 < 150 mg/dL"
          ></van-cell>
        </van-collapse-item>
        <van-cell title="您的尿酸是：" :value="XXobj.bsList.ua + ' μmol/L'" />
        <van-collapse-item title="尿酸（ua，Uric Acid）" name="2">
          <van-cell title="正常范围(男性)" value="208-428 μmol/L"></van-cell>
          <van-cell title="正常范围(女性)" value="155-357 μmol/L"></van-cell>
          <van-cell
            title="高尿酸"
            value="≥ 428 μmol/L（可能导致痛风）"
          ></van-cell>
          <van-cell title="低血压" value="<90 mmHg"></van-cell>
        </van-collapse-item>
        <van-cell
          title="您的血糖是："
          :value="XXobj.bsList.value + ' mmol/L'"
        />
        <van-collapse-item title="血糖（bs，Blood Sugar）" name="3">
          <van-cell
            title="正常范围(空腹血糖)"
            value="3.9-5.6 mmol/L"
          ></van-cell>
          <van-cell
            title="正常范围(餐后2小时血糖)"
            value="< 7.8 mmol/L "
          ></van-cell>
          <van-cell title="高血糖(空腹血糖)" value="≥ 7.0 mmol/L"></van-cell>
          <van-cell
            title="高血糖(餐后2小时血糖)"
            value="11.1 mmol/L"
          ></van-cell>
          <van-cell title="低血糖(空腹血糖)" value="< 3.9 mmol/L"></van-cell>
        </van-collapse-item>
      </van-collapse>
    </div>
  </van-popup>
</template>

<script setup>
import { getandroidCode } from "../../common/auth";
import headerXX from "../../components/title.vue";
import { ref, onMounted, onBeforeUnmount } from "vue";
import { selectUser } from "@/api/home.js";
import {
  getUserBodyCompositionList,
  QRCode,
  userQRCode,
} from "@/api/JBJJ_JKZC_GXGJ_SHFS/index.js";
import tabul from "../../components/tab.vue";
import { boBoxxx, boBoxXXHXX } from "./common/bo.js";
import { bpBoxxx, bpBoxXXHXX } from "./common/bp.js";
import { bsBoxxx, bsBoxXXHXX } from "./common/bs.js";
import { useRouter } from "vue-router";
let title = ref("健康分析");
const router = useRouter();
let XXobj = ref({
  age: "",
  birthday: "",
  bmiList: "",
  boList: "",
  bpList: "",
  bsList: "",
  creationTime: "",
  gender: "",
  id: "",
  mobile: "",
  tempList: "",
  userName: "",
});
let list = ref([
  {
    goodId: 0,
    goodName: "健康自测一体机",
  },
  {
    goodId: 1,
    goodName: "人体成分分析仪",
  },
]);
let bsactiveNames = ref([]);
let bpactiveNames = ref([]);

const PDtab = ref(0);
let name = ref("");
onMounted(() => {
  GetXX();
});
onBeforeUnmount(() => {
  boBoxXXHXX();
  bpBoxXXHXX();
  bsBoxXXHXX();
});
let bsshow = ref(false);
let bpshow = ref(false);
let boshow= ref(false);
function XXtab(val) {
  PDtab.value = val.goodId;
}
function TZLB() {
  router.push("/JKZC/FXLB");
				// uni.navigateTo({
				// 	url: '/pages/pagesNew/JKZC/FXLB'
				// })
			}
function GetXX() {
  selectUser({
    ishid: getandroidCode(), //拿到编码
  }).then((resXX) => {
    getUserBodyCompositionList({
      mobile: resXX.data.mobile,
    }).then((res) => {
      XXobj.value = res.data[0];

      name.value = XXobj.value.userName;
      setTimeout(() => {
        bpBoxxx(XXobj.value.bpList);
        bsBoxxx(XXobj.value.bsList);
        boBoxxx(XXobj.value.boList);
      }, 1000);
    });
  });
}
</script>
<style>
.van-cell__value {
  flex: 0 1 auto;
}
</style>
<style lang="scss" scoped>
.box {
  position: relative;
  width: 100%;
}
.height80 {
  height: 80px;
}
.ZWXX {
  font-size: 15px;
  color: #666;
  line-height: 100px;
  text-align: center;
}
.JKZCxx {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .bottom_li {
    background: #fff;
    margin-top: 15px;
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    height: 50px;

    .XX {
      width: calc(100% - 165px);
      margin: 0 10px;
      line-height: 25px;
    }

    .left {
      height: 50px;
      width: 50px;
      color: rgb(29, 100, 250);
      font-weight: 700;
      background: rgb(219, 234, 254);
      font-size: 33px;
      text-align: center;
      line-height: 80px;
      border-radius: 10px;
      position: relative;

      .iconXX {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .li {
    width: 48%;
    height: 150px;
    background: #fff;
    border-radius: 10px;
    margin-top: 15px;
    padding: 10px;
    box-sizing: border-box;
  }
}
.TX_TOP {
  width: 95%;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: #fff;
  border-radius: 0px 0px 25px 25px;
  height: 80px;

  .imgTX {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    margin-right: 10px;
  }
}
.felx {
  display: flex;
  align-items: center;
  font-size: 12px;

  .img {
    height: 80px;
    width: 80px;
    color: rgb(29, 100, 250);
    font-weight: 700;
    background: rgb(219, 234, 254);
    font-size: 33px;
    text-align: center;
    line-height: 80px;
    border-radius: 10px;
  }

  .text {
    width: calc(100% - 80px);
    margin-left: 10px;
  }
}
.NR {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 20px !important;

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;

    .title_left {
      font-weight: 700;
      font-size: 15px;
    }

    .title_right {
      color: rgb(53, 116, 250);
      font-weight: 700;
      font-size: 14px;
    }
  }
}
.tabul {
  padding: 0 !important;
  background: rgb(241, 245, 249);
}
</style>